<template>
    <el-upload drag :action="uploadUrl" :headers="headers" multiple :data="dataForm" :ref="ref" :auto-upload="true"
        name="file" :on-error="uploadOnError" :on-progress="uploadOnProgress" :on-change="uploadOnChange"
        :on-success="uploadOnSuccess" :on-remove="uploadRemove" :before-remove="beforeRemove" :on-exceed="uploadExceed"
        :show-file-list="false" :limit="1">
        <img v-if="fileObj" :src="fileObj.url" class="avatar">
        <div v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </div>
    </el-upload>
</template>

<script>
    import * as filemanagerService from '@/api/file/filemanager'
    import util from '@/libs/util'

    export default {
        props: {
            value: {
                type: Object,
                default: {},
                required: true
            },
            dataForm: {
                type: Object,
                default: {
                    fileSpace: '',
                    storeType: '',
                    filePath: ''
                }
            }
        },
        data() {
            return {
                fileObj: {},
                ref: 'upload' + new Date(),
                visible: false
            }
        },
        watch: {
            value(val) {
                this.fileObj = val
            }
        },
        computed: {
            // 设置请求头
            headers() {
                return {
                    // 设置Content-Type类型为multipart/form-data
                    'ContentType': 'multipart/form-data',
                    // 设置token
                    'Authorization': util.cookies.get('token_type') + " " + util.cookies.get('token')
                }
            },
            // 设置上传地址
            uploadUrl() {
                // baseURL是服务器的路径，也是axios的基本路径
                return process.env.VUE_APP_API + '/fs/local/saveFile'
            },
            // ref() {
            //     return "upload" + new Date()
            // }
        },
        beforeDestroy() {
            console.log(this.$refs[this.ref])
            this.$refs[this.ref].clearFiles()
            this.visible = false
        },
        created() {
            this.init()
        },
        methods: {
            // 初始化
            init() {
                this.visible = true
                this.$nextTick(() => {
                    console.log(this.$refs[this.ref])
                })
            },
            //删除前提示
            beforeRemove(file) {
                if (file && file.response.code == 200) {
                    let fileData = file.response.data
                    return this.$confirm("确认删除【" + fileData.fileName + "】？", "确认信息");
                }
            },
            // 删除上传的附件
            uploadRemove(file, fileList) {
                if (file && file.response.code == 200) {
                    let fileData = file.response.data
                    filemanagerService.delfilemanager(fileData.fileId).then(() => {});
                }
            },
            uploadOnProgress(e, file) { //开始上传
                console.log(e.percent, file)
            },
            uploadOnChange(file) {
                // console.log("——————————change——————————")
                // console.log(file)
                if (file.status == 'ready') {
                    // console.log("ready")
                } else if (file.status == 'fail') {
                    this.$message.error("图片上传出错，请刷新重试！")
                }
            },
            uploadOnSuccess(e, file) { //上传附件
                // console.log("——————————success——————————")
                if (e.code == '200') {
                    this.$message.success("上传成功")
                    this.fileObj = e.data;
                    this.$emit("input", e.data)
                    this.$emit("callback", e.data)
                    this.visible = false
                } else {
                    this.$message.success("上传失败")
                }
            },
            uploadOnError(e, file) {
                // console.log("——————————error——————————")
                // console.log(e)
                this.$message.error("图片上传出错，请刷新重试！")
            },
            // 文件超出个数限制时的钩子
            uploadExceed(files, fileList) {
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: auto;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: auto;
        height: 178px;
        display: block;
    }
</style>